<template>
  <div class="view-research-wrapper page-wrapper">
    <!-- <div class="page-title">Research 科研</div> -->
    <div class="container">
      <div class="project-list" v-if="$store.state.language === 'zh-CN'">
        <a name="project"/>
        <h3>科研项目</h3>
        <div class="project-container">
          <div class="project-instance" v-for="(item, _) in projectList" :key="_">
            <div class="content">
              <el-tag type="warning" effect="plain">{{item.time}}</el-tag>
              <span>{{item.content}}</span>
            </div>
            <div class="role">{{item.role}}</div>
            <div class="number">{{_ + 1}}</div>
          </div>
        </div>
      </div>
      <div class="project-list" v-else>
        <h3>Research Projects</h3>
        <div class="project-container">
          <div class="project-instance" v-for="(item, _) in enProjectList" :key="_">
            <div class="content">
              <el-tag type="warning" effect="plain">{{item.time}}</el-tag>
              <span>{{item.content}}</span>
            </div>
            <div class="role">{{item.role}}</div>
            <div class="number">{{_ + 1}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-container">
      <a name='job'/>
      <div class="container">
        <div class="activity-list" v-if="$store.state.language === 'zh-CN'">
          <h3>社会兼职</h3>
          <div class="activity-container">
            <div class="activity-instance" v-for="(item, _) in activityList" :key="_">
              <div class="content">
                <el-tag type="warning" effect="plain">{{_ + 1}}</el-tag>
                {{item.content}}
              </div>
            </div>
          </div>
        </div>
        <div class="activity-list" v-else>
          <h3>Part-time Work</h3>
          <div class="activity-container">
            <div class="activity-instance" v-for="(item, _) in enActivityList" :key="_">
              <div class="content">
                <el-tag type="warning" effect="plain">{{_ + 1}}</el-tag>
                {{item.content}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { RequestStatus } from "../utils/constans";
import { formatBackTime } from "../utils/common";
import { iActivies } from "../typings/publication";
import { iResearchProject } from "../typings/research";
import $api from "../api";

@Component
export default class StudnetsView extends Vue {
  private projectList: iResearchProject[] = [];
  private enProjectList: iResearchProject[] = [];
  private activityList: iActivies[] = [];
  private enActivityList: iActivies[] = [];

  mounted() {
    this.getProjectList();
    this.getActivityList();
  }

  getProjectList() {
    $api.research.findAllresearchProjectClient().then(res => {
      (res as any).map((record: iResearchProject) => {
        let split = ["", "", ""];
        if (record.language === "英语") {
          split = record.content.split(",");
        } else {
          split = record.content.split("，");
        }
        record.content = split[0];
        record.time = split[1];
        record.role = split[2];
        if (record.language === "英语" && this.enProjectList.length < 8) {
          this.enProjectList.push(record);
        } else if (record.language !== "英语" && this.projectList.length < 8) {
          this.projectList.push(record);
        }
      });
    });
  }

  getActivityList() {
    $api.publication.findAllProfessionalActivitiesClient().then(res => {
      (res as any).map((record: iActivies) => {
        if (record.language === "英语") {
          this.enActivityList.push(record);
        } else if (record.language !== "英语") {
          this.activityList.push(record);
        }
      });
    });
  }
}
</script>

<style lang="scss" scoped>
.view-research-wrapper {
  .page-container {
    background: #f7f8fa;
    padding: 30px 0;
  }
  .container {
    width: 1200px;
    margin: auto;
    .project-list,
    .activity-list {
      h3 {
        text-align: left;
      }
    }
    .project-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .project-instance {
      width: 48%;
      padding: 15px;
      position: relative;
      background: #f7f8fa;
      text-align: left;
      padding-bottom: 40px;
      box-sizing: border-box;
      margin-bottom: 20px;
      .content {
        display: flex;
        span {
          &:last-child {
            margin-left: 10px;
            line-height: 32px;
          }
        }
      }
      .role {
        position: absolute;
        left: 25px;
        bottom: 10px;
        z-index: 100;
        color: #113f6c;
        font-weight: bold;
      }
      .number {
        position: absolute;
        right: 10px;
        bottom: 0;
        font-size: 70px;
        color: #d1d1d1;
      }
    }

    .activity-instance {
      text-align: left;
      background: white;
      padding: 20px;
      border-bottom: 1px solid #ececec;
      &:last-child {
        border-bottom: none;
      }
      .content {
        span {
          margin-right: 10px;
        }
        line-height: 32px;
      }
    }
  }
}
@media screen and (max-width: 980px) {
  .view-research-wrapper {
    .container{
      .project-list,
      .activity-list {
        h3 {
          padding-left: 20px;
        }
      }
      .project-instance{
        width: 98%;
        margin-left: 1%;
      }
    }
    
  }
}
</style>